<template>
  <div class="group_buy_phase">
    <tableComponents :pagination="{
        currentPage,
        pageSize: pagesize,
        total: shop_list.all_num
      }" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :isHaveExport="false" :isShow="false" :isHaveAdd="false">
      <template v-slot:table>
        <el-table ref="multipleTable" stripe v-loading="loading" header-row-class-name="head_color" :data="shop_list.data" tooltip-effect="dark"
            style="width: 99.8%" :default-sort="{ prop: 'sort' }" @selection-change="handleSelectionChange">
          <el-table-column label="拼购分类" min-width="70">
            <template slot-scope="scope">{{ scope.row.cate_name }}</template>
          </el-table-column>

          <el-table-column label="拼购期数" min-width="70">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{ scope.row.phase }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="拼购状态" min-width="70">
            <template slot-scope="scope">
              <div class="tab_div">
                <el-tag v-if="scope.row.status == 0" type="success" effect="dark">拼购中</el-tag>
                <el-tag v-if="scope.row.status == 1" type="danger" effect="dark">已开奖</el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="参与人数" min-width="70">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{ scope.row.num }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="剩余人数" min-width="70">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{
                    scope.row.number - scope.row.num > 0
                      ? scope.row.number - scope.row.num
                      : 0
                  }}</span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="参与用户" min-width="70">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" size="mini" type="primary" @click="toPeople(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>
  </div>
</template>

<script>
export default {
  name: "group_buy_phase",
  data () {
    return {
      gid: this.$route.query.gid,
      shop_list: {
        data: []
      },
      loading: false,
      pagesize: 10,
      currentPage: 1,
      formLabelWidth: "120px",
      multipleSelection: []
    };
  },
  components: {},
  created () {
    this.getGroupbuyPhase();
  },
  mounted () { },
  methods: {
    getGroupbuyPhase (page) {
      var params = {};
      params = this.searchAll || {};
      params.page = page;
      params.page_size = this.pagesize;
      params.id = this.$route.query.gid;
      this.$api.getGroupbuy.getGroupbuyPhase(params).then(res => {
        if (res.data.code == 200) {
          this.shop_list = res.data.result;
        }
        this.loading = false;
      });
    },
    toPeople (row) {
      this.$store.commit("addbreadcrumbs", {
        title: "参与用户查看",
        url: `/index/groupbuy/people?gid=${row.gid}&phase=${row.phase}`
      });
      this.$router.push({
        path: "/index/groupbuy/people",
        query: {
          gid: row.gid,
          phase: row.phase
        }
      });
    },

    handleSelectionChange (val) {
      this.multipleSelection = val;
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      //每页下拉显示数据
      this.pagesize = size;
      this.getGroupbuyPhase(1);
    },
    handleCurrentChange: function (currentPage) {
      //点击第几页
      this.currentPage = parseInt(currentPage);
      this.getGroupbuyPhase(this.currentPage);
    }
  }
};
</script>
<style lang="less" scoped></style>
